<template>
	<view class="container">

		<view class="title-wrap">

			<image class="activity-img" :src="vdata.activityDetail.activityImg"></image>

			<view class="name">
				<view>{{ vdata.activityDetail.activityName }}</view>
			</view>

			<view class="row proxy">
				{{ vdata.activityDetail.agentName }}
			</view>
			<view class="row coupon">
				代金券
				<text class="number"> {{ vdata.remainNum || 0 }}</text>
			</view>
			<view class="row date">
				{{ dayjs(vdata.activityDetail.startTime).format('YYYY[年]MM[月]DD[日]') }}~{{ dayjs(vdata.activityDetail.endTime).format('YYYY[年]MM[月]DD[日]') }}
				<text class="number-des">卡券剩余数量</text>
			</view>

			<view class="line"></view>

			<view class="row tip">
				<text>{{ vdata.activityDetail.remark?.replace(/\\n/g, "\n") }}</text>
			</view>
		</view>

		<view class="header-wrap">
			<text class="title">卡券发放列表</text>
			<view class="filter" @click="onOpenSearch()">
				<uni-icons type="search" size="24"></uni-icons>
				<text>查询客户</text>
			</view>
		</view>

		<view class="content-wrap">
			<view class="item" v-for="item in useDataResult.dataList">
				<view class="number">
					<text class="title">{{ item.couponName }}</text>
					<!-- <text class="price">¥ {{ item.price }}</text> -->
				</view>
				<view class="line"></view>
				<text v-if="item.sendMchName" class="info">发放商户：{{ item.sendMchName }}</text>
				<text v-else class="info">发放机构：{{ item.sendAgentName }}</text>
				<text class="info">发放时间：{{ item.createdAt || '--' }}</text>
				<!-- <text class="info">核销商户：{{ item.price }}</text> -->
				<text class="info">核销时间：{{ item.writeTime || '--' }}</text>
				<view class="line"></view>
				<text class="title">领用人信息</text>
				<view class="number">
					<text>姓名：{{ item.realName || '--' }}</text>
					<view class="detail" @click="onOpenInfo(item.activityAwardId,item.fansAwardId)">查看详情</view>
				</view>
				<text>手机号：{{ item.phone || '--' }}</text>
				<!-- 已核销 -->
				<image v-if="item.writeTime" class="img1" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/c5461e4c-c902-4cef-ac12-39ddaf6a5974.png" mode=""></image>
				<!-- 未核销 -->
				<image v-else class="img1" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e70d0505-67a5-46a4-b76b-94fbc03ead4c.png" mode=""></image>
				<view class="line" v-if="item?.extraJson"></view>
				<text class="title" v-if="item?.extraJson">回执信息</text>
				<!-- <text v-if="item.extraJson">{{JSON.parse(item?.extraJson.trim())}}</text> -->

				<text class="name" v-if="item.extraJson&&JSON.parse(item.extraJson.trim()).receiptContent?.name">姓名：{{JSON.parse(item.extraJson.trim()).receiptContent?.name}}</text>
				<text class="phone" v-if="item.extraJson&&JSON.parse(item.extraJson.trim())?.receiptContent?.phone">手机号：{{JSON.parse(item.extraJson.trim())?.receiptContent?.phone}}</text>
				<text class="idNum" v-if="item.extraJson&&JSON.parse(item.extraJson.trim())?.receiptContent?.idCardNo">身份证号：{{JSON.parse(item.extraJson.trim())?.receiptContent?.idCardNo}}</text>
				<text class="bankNum" v-if="item.extraJson&&JSON.parse(item.extraJson.trim())?.bankCardNo">银行卡号：{{JSON.parse(item.extraJson.trim())?.bankCardNo}}</text>
				<view class="bankImg" v-if="item.extraJson&&JSON.parse(item.extraJson.trim())?.receiptContent?.bankCardImg">
					<view class="title1">银行卡照片：</view>
					<image @click="clickImg(JSON.parse(item.extraJson.trim())?.receiptContent?.bankCardImg)" class="img" :src="JSON.parse(item.extraJson.trim())?.receiptContent?.bankCardImg" mode="aspectFill"></image>
				</view>


			</view>
		</view>

		<gzListNull :list="useDataResult.dataList"></gzListNull>

		<!-- 普通弹窗 -->
		<uni-popup ref="searchPopup" type="top">
			<view class="popup-content">
				<view class="item">
					<text>客户手机号</text>
					<input class="input" placeholder-style="color:#BBBBBB" placeholder="请输入客户手机号" v-model="vdata.queryParams.phone" />
				</view>
				<view class="item">
					<text>客户姓名</text>
					<input class="input" placeholder-style="color:#BBBBBB" placeholder="请输入客户姓名" v-model="vdata.queryParams.realName" />
				</view>
				<view class="item">
					<text>发放时间</text>
					<view class="time" @click="onOpenDate()">
						<text :style="vdata.queryParams.createdAt?'color:#333':'color:#BBBBBB'">{{vdata.queryParams.createdAt?vdata.queryParams.createdAt:'发放时间'}}</text>
						<uni-icons type="down" color="#A0A9C0" size="20"></uni-icons>
					</view>
				</view>
				<view class="bottom-wrap">
					<text class="reset" @click="onReset">重置</text>
					<text class="query" @click="onQuery">查询</text>
				</view>
			</view>
		</uni-popup>

		<!-- 详情弹窗 -->
		<uni-popup ref="infoPopup" type="bottom">
			<view class="popup-info">
				<text class="title">卡券领用详情</text>
				<uni-icons type="closeempty" size="24" color="darkgray" class="close" @click="onCloseInfo()"></uni-icons>

				<view class="content">
					<view class="item">
						<text>活动名称</text>
						<text>{{ vdata.fansCouponDetail.activityName }}</text>
					</view>
					<view class="item">
						<text>活动类型</text>
						<text>{{ vdata.fansCouponDetail.activityTypeName }}</text>
					</view>
					<view class="item">
						<text>活动创建机构</text>
						<text>{{ vdata.fansCouponDetail.agentName }}</text>
					</view>
					<view class="item">
						<text>活动时间</text>
						<text>{{ dayjs(vdata.fansCouponDetail.startTime).format('YYYY[年]M[月]D[日]') }}~{{ dayjs(vdata.fansCouponDetail.endTime).format('YYYY[年]M[月]D[日]') }}</text>
					</view>
					<view class="line"></view>
					<view class="item">
						<text>领用人姓名</text>
						<text>{{ vdata.fansCouponDetail.realName || '--' }}</text>
					</view>
					<view class="item">
						<text>领用人手机号</text>
						<text>{{ vdata.fansCouponDetail.phone || '--' }}</text>
					</view>
					<view class="item">
						<text>领用卡券名称</text>
						<text>{{ vdata.fansCouponDetail.couponName || '--' }}</text>
					</view>
					<view class="item">
						<text>领用卡券面额</text>
						<text class="price">¥{{ vdata.fansCouponDetail.couponPrice ? vdata.fansCouponDetail.couponPrice / 100 : '--' }}</text>
					</view>
					<view class="item">
						<text>领用卡券时间</text>
						<text>{{ dayjs(vdata.fansCouponDetail.createdAt).format('YYYY[年]M[月]D[日][ ]HH:mm') }}</text>
					</view>
				</view>
				<text class="bottom-wrap" @click="onCloseInfo()">
					确定
				</text>
			</view>
		</uni-popup>

		<!-- 日历 -->
		<uni-calendar ref="calendarRef" :insert="false" @confirm="onConfirmDate" />
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import { reactive, ref, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { $sendCouponList, $activityDetail, $fansCouponDetail } from '@/http/marketing/apiMarketing.js'
	import useGetList from '@/hooks/useGetList.js'
	import { formatRichText } from '@/util/htmlUtil.js'
	import storageManage from '@/util/storageManage.js'

	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

	const { useDataResult, getList } = useGetList($sendCouponList, data => data, {}, false)

	// console.log(useDataResult.dataList,4444444)
	// 搜索弹窗
	const searchPopup = ref();

	// 搜索弹窗
	const calendarRef = ref();

	// 领取详情弹窗
	const infoPopup = ref();


	const vdata = reactive({
		queryParams: {
			phone: '',
			realName: '',
			createdAt: '',
		},
		activityDetail: {}, // 活动详情
		remainNum: 0, // 卡券剩余数量
		fansCouponDetail: {}, // 卡券领用详情
	})

	onLoad(({ activityId, remainNum }) => {
		// 活动详情
		getActivityDetail(activityId)
		// 卡券数量
		vdata.remainNum = remainNum
		// 请求卡券发放列表
		getList({ activityId, agentNo: storageManage.userInfo().khjlAgentNo })
	})

	/**
	 * 打开搜索弹窗
	 */
	const onOpenSearch = () => {
		getApp().preventActive(() => {
			searchPopup.value.open();
		})


	}

	// 点击图片出现预览图片
	const clickImg = (item) => {
		uni.previewImage({
			urls: [item], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			current: '', // 当前显示图片的http链接，默认是第一个
			success: function(res) {},
			fail: function(res) {},
			complete: function(res) {},
		})

	}
	/**
	 * 重置
	 */
	const onReset = () => {
		vdata.queryParams = {
			phone: '',
			realName: '',
			createdAt: '',
		}
	}
	/**
	 * 筛选
	 */
	const onQuery = () => {
		getApp().preventActive(() => {
			getList(vdata.queryParams)
			onCloseSearch()
		})

	}

	/**
	 * 关闭搜索弹窗
	 */
	const onCloseSearch = () => {
		searchPopup.value.close();
	}

	/**
	 * 打开领取详情弹窗
	 */
	const onOpenInfo = (activityAwardId, fansAwardId) => {
		getApp().preventActive(() => {
			uni.showLoading({
				title: '加载中...'
			})
			$fansCouponDetail({ fansAwardId }).then(({ bizData }) => {
				uni.hideLoading()
				vdata.fansCouponDetail = bizData
				infoPopup.value.open();
			})
		})

	}

	/**
	 * 关闭领取详情弹窗
	 */
	const onCloseInfo = () => {
		infoPopup.value.close();
	}

	/**
	 * 打开日历
	 */
	const onOpenDate = () => {
		calendarRef.value.open();
	}

	/**
	 * 日期选择
	 */
	const onConfirmDate = (result) => {
		vdata.queryParams.createdAt = result.fulldate
	}

	/**
	 * 活动详情
	 */
	const getActivityDetail = (activityId) => {
		$activityDetail({ activityId }).then(({ bizData }) => {
			Object.assign(vdata.activityDetail, { ...bizData, remark: formatRichText(bizData.remark) })
		})
	}
</script>

<style lang="less">
	@page-backgroud: #F6F7FC; //页面背景色

	page {
		background: @page-backgroud;
	}

	.container {
		min-height: 100vh;
		overflow-y: hidden;
		// margin: 30rpx 20rpx 30rpx 20rpx;

		.title-wrap {
			background-color: white;
			padding: 30rpx 20rpx 30rpx 20rpx;

			.activity-img {
				width: 100%;
				height: 372rpx;
				border-radius: 16rpx;
			}

			.name {
				margin-top: 36rpx;
				display: flex;
				align-items: center;
				gap: 12rpx;

				view {
					&:nth-child(1) {
						font-weight: bold;
						font-size: 38rpx;
						color: #333333;
					}

				}
			}

			.row {
				position: relative;
				padding-left: 38rpx;
				font-size: 26rpx;
				color: #A0A9C0;
				margin-top: 24rpx;

				view {
					&:nth-child(n + 2) {
						margin-top: 24rpx;
					}
				}

				&::before {
					content: '';
					display: block;
					width: 26rpx;
					height: 26rpx;
					background-position: 0 0;
					background-repeat: no-repeat;
					background-size: 100% 100%;
					position: absolute;
					left: 0rpx;
					top: 5rpx;
				}

				.number {
					font-size: 38rpx;
					color: #FF8833;
					font-weight: bold;
					position: absolute;
					right: 0;
				}

				.number-des {
					position: absolute;
					right: 0;
				}

			}

			.coupon {
				&::before {
					background-image: url('../static/icon-coupon.png');
				}
			}

			.date {
				&::before {
					background-image: url('../static/icon-date.png');
				}
			}

			.tip {
				&::before {
					background-image: url('../static/icon-tip.png');
				}
			}

			.proxy {
				&::before {
					background-image: url('../static/icon-proxy.png');
				}
			}

			.line {
				height: 2rpx;
				background-color: #F3F3F3;
				margin: 30rpx 0;
			}
		}

		.header-wrap {
			width: 100%;
			/* Safari */
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 2;
			box-sizing: border-box;
			padding: 30rpx 30rpx;
			background-color: @page-backgroud;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				font-style: normal;
				flex-grow: 1;
			}


			.filter {
				display: flex;
				align-items: center;
				border-radius: 40rpx;
				background-color: white;
				padding: 8rpx 20rpx;
				border: 1rpx solid #C8C8C8;

				text {
					font-size: 26rpx;
					color: black;
					letter-spacing: 1px;
					margin-bottom: 2rpx;
				}
			}
		}

		.content-wrap {
			position: relative;
			z-index: 0;
			margin: 0rpx 20rpx 30rpx 20rpx;

			.item {
				box-sizing: border-box;
				padding: 30rpx;
				background: #fff;
				border-radius: 20rpx;
				box-shadow: 0rpx -10rpx 30rpx -30rpx rgba(0, 0, 0, 0.8);
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;
				color: #999999FF;
				font-size: 26rpx;
				position: relative;



				.line {
					height: 1rpx;
					background-color: #E6E6E6;
					margin: 20rpx 0rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					margin: 15rpx 0rpx;
				}

				.info {
					margin-bottom: 10rpx;
				}

				.number {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: darkgray;

					.price {
						font-size: 38rpx;
						color: #FF8833;
						font-weight: bold;
					}

					.detail {
						border: 1rpx solid #C8C8C8;
						border-radius: 35rpx;
						background-color: white;
						padding: 15rpx 30rpx;
						color: #333333;
						box-shadow: 0rpx -10rpx 30rpx -30rpx rgba(0, 0, 0, 0.8);
					}

				}

				.img1 {
					width: 200rpx;
					height: 200rpx;
					position: absolute;
					right: 30rpx;
					top: 30%;
					transform: translateY(-50%);
				}

				.bankImg {
					display: flex;
					width: 100%;
					height: 120rpx;
					align-items: center;

					.img {
						width: 80rpx;
						height: 80rpx;

					}

				}
			}
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 30rpx;
			font-size: 26rpx;
			background-color: white;
			border-radius: 0 0 20rpx 20rpx;
			letter-spacing: 1px;
			box-sizing: border-box;
			// margin-top: 120rpx;

			.item {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				margin-bottom: 30rpx;
				width: 100%;

				.input {
					border-radius: 40rpx;
					padding: 18rpx 30rpx;
					background-color: #F6F7FC;
					margin-top: 20rpx;
					font-size: 30rpx;
				}

				.time {
					border-radius: 40rpx;
					padding: 18rpx 30rpx;
					background-color: #F6F7FC;
					font-size: 30rpx;
					flex-grow: 1;
					display: flex;
					justify-content: space-between;
					color: #BBBBBB;
					margin-top: 20rpx;
				}

			}


			.bottom-wrap {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 30rpx;
				margin-top: 30rpx;
				margin-bottom: 10rpx;
				width: 100%;

				.reset {
					color: black;
					border-radius: 40rpx;
					width: 25%;
					padding: 18rpx 0rpx;
					background-color: #F4F5F5;
					text-align: center;
					margin-right: 30rpx;
				}

				.query {
					color: white;
					border-radius: 40rpx;
					width: 75%;
					padding: 18rpx 0rpx;
					background-color: #24C789;
					margin-top: 30rpx;
					text-align: center;
					margin-bottom: 10rpx;
				}
			}

		}

		.popup-info {
			display: flex;
			flex-direction: column;
			padding: 40rpx 30rpx;
			font-size: 28rpx;
			background-color: white;
			border-radius: 20rpx 20rpx 0 0;
			letter-spacing: 1px;
			box-sizing: border-box;
			position: relative;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 20rpx;
				text-align: center;
			}

			.close {
				position: fixed;
				right: 0;
				top: 0;
				margin-top: 25rpx;
				margin-right: 25rpx;
			}

			.line {
				height: 1rpx;
				margin: 20rpx 0rpx;
				border-bottom: 1rpx dotted #E6E6E6;
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.price {
					font-size: 34rpx;
					color: #FF8833;
					font-weight: bold;
				}
			}

			.content {
				background-color: #F6F7FCFF;
				border-radius: 15rpx;
				padding: 30rpx 30rpx 0 30rpx;
				color: #666666FF;
			}

			.bottom-wrap {
				font-size: 30rpx;
				width: 100%;
				color: white;
				border-radius: 40rpx;
				padding: 20rpx 0rpx;
				background-color: #24C789;
				margin-top: 40rpx;
				text-align: center;
				margin-bottom: 10rpx;
			}

		}

	}
</style>